import React, {Component, PropTypes} from 'react';
import {hashHistory} from 'react-router'

import CascadingAddress from './CascadingAddress';
import {_Icon,_message} from 'ANT_DE';
const Icon = _Icon,
      message = _message;

import Relay from "react-relay";
import EnterpriseDetailMutation from "./mutation/EnterpriseDetailMutation";

import {Button} from 'fly';

export default class  extends Component {
    constructor(props) {
        super(props);
        this.state = {
            enterpriseName:"",  //企业名称
            enterpriseCode:null,  //组织机构代码

            serviceType:"", //企业类型 key
            serviceTypeName:"", //企业类型名称

            //地址
            province:"",
            city:"",
            region:"",
            address:"",

            telephone:null, //联系方式

            //财务信息
            bankAccount:"", //开户名称
            bankName:"", //开户银行
            bankNo:null, //银行账号
            taxpayerNo:null, //纳税人识别号


            //企业管理员
            userPhone:null, //手机
            userName:"",  //姓名
            roleName:"",  //职务

            remark:"", // 备注

            addressLevelThreeValue:""
        };

        this.editor = this.editor.bind(this);
    }

    componentWillMount(){
        this.enid = sessionStorage.getItem('enterpriseId');
        Relay.Store.commitUpdate(
            new EnterpriseDetailMutation({
                enterpriseId:this.enid
            }),
            {
                onFailure:()=>{

                },
                onSuccess:(response)=>{
                    const data = response.enterpriseDetail.data,
                        addressDate = new CascadingAddress().addr_arr;
                    if(response.enterpriseDetail.data.errorCode === "0"){
                        // 此处为避免冗余代码，使用ES6对象解构复制和javaScript键值自动匹配.assasd
                        this.setState({
                            ...data.enterprise
                        },()=>{
                                try{
                                    let sheng = (addressDate[0][this.state.province-1])[1],
                                        shi =  (addressDate[this.state.province].filter((v,k)=>v[0] == this.state.city))[0][1],
                                        xian = addressDate[this.state.city].filter((v,k)=>v[0] == this.state.region)[0][1];
                                    this.setState({
                                        addressLevelThreeValue:(sheng || "") + (shi || "") + (xian || "")
                                    })
                                }catch (e){}
                        })
                    }else{
                        message.error("网络连接错误")
                    }
                }
            })
    }

    editor(){
        hashHistory.push("/companyinfo")
    }

    render() {
        const {
            enterpriseName,
            enterpriseCode,
            serviceType,
            serviceTypeName,

            address,

            telephone,
            bankAccount,
            bankName,
            bankNo,
            taxpayerNo,

            userPhone,
            userName,
            roleName,

            remark,
            addressLevelThreeValue
        } = this.state;

        return <div className="entype_infoShow">
                <div className="entype_infoShow--main">
                    <div className="entype_infoShow--baseInfo">
                        <p className="entype_infoShow--headerTitle">
                            <span>
                                基础资料
                            </span>
                            <Button className="entype_infoShow_editor" onClick={this.editor}>
                                <Icon type="edit enter_type--edit___cancel" style={{ fontSize:15,marginRight:5,marginLeft:-5}} />
                                    编辑
                             </Button>
                        </p>
                        <div className="entype_infoShow--content">
                            <ul>
                                <li><span>企业名称</span> { enterpriseName } </li>
                                <li><span>组织机构代码</span> { enterpriseCode } </li>
                                <li><span>企业类型</span> { serviceTypeName } </li>
                                <li><span>企业地址</span> { addressLevelThreeValue } </li>
                                <li><span>详细地址</span> {address} </li>
                                <li><span>联系方式</span> { telephone } </li>
                            </ul>
                        </div>
                    </div>

                    <div className="entype_infoShow--financialInfo">
                        <p className="entype_infoShow--headerTitle">
                        <span>
                            财务信息
                        </span>
                        </p>
                        <div className="entype_infoShow--content">
                            <ul>
                                <li><span>开户名称</span> { bankAccount } </li>
                                <li><span>开户银行</span> { bankName } </li>
                                <li><span>银行账号</span> { bankNo } </li>
                                <li><span>纳税人识别号</span> { taxpayerNo } </li>
                            </ul>
                        </div>
                    </div>

                    <div className="entype_infoShow--enAdmin">
                        <p className="entype_infoShow--headerTitle">
                        <span>
                            企业管理员
                        </span>
                        </p>
                        <div className="entype_infoShow--content">
                            <ul>
                                <li><span>手机</span> {userPhone} </li>
                                <li><span>姓名</span> {userName} </li>
                                <li><span>职务</span> {"管理员(默认)"} </li>
                            </ul>
                        </div>
                    </div>

                    <div className="entype_infoShow--other">
                        <p className="entype_infoShow--headerTitle">
                         <span>
                            其他
                        </span>
                        </p>
                        <div className="entype_infoShow--content">
                            <ul>
                                <li><span>备注</span> {remark} </li>
                            </ul>
                        </div>
                    </div>
                </div>

        </div>
    }
}